<template>
    <div>
        <div v-if="list.length > 1" class="busi-state-main">
            <flexbox class="busi-state">
                <!-- <span style="margin-right: 18px; font-weight: bold">需求进度：</span> -->
                <a v-for="(item, index) in list" :key="index" :style="{ minWidth: index === 0 && list.length === 3 ? '290px' : 'auto' }">
                    <div v-if="list.length - 1 != index" :class="getClass(item)" class="busi-state-item">
                        {{ item.name }}<my-icon type="iconcomplete" class="margin-l-8" v-if="item.IsDone" /><my-icon type="iconincomplete" v-if="item.IsDoing" />
                        <div v-if="index === 0" :class="['state-circle', 'circle-left', list.length === 3 ? 'double-width' : '']" />
                        <div v-if="index !== 0" class="state-arrow arrow-left" />
                        <div class="state-arrow arrow-right" />
                    </div>
                    <div v-if="list.length - 1 == index">
                        <div :class="getClass(item)" class="busi-state-item">
                            {{ item.name }}<my-icon type="iconcomplete" class="margin-l-8" v-if="item.IsDone" /><my-icon type="iconincomplete" v-if="item.IsDoing" />
                            <div class="state-arrow arrow-left" />
                            <div class="state-circle circle-right" />
                        </div>
                    </div>
                </a>
            </flexbox>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
    props: {
        flowInfo: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const list = ref<any>();
        const getClass = (item) => {
            if (item.IsFinished) {
                return 'state-suc';
            }
            if (item.IsDone) {
                return 'state-done';
            }
            if (item.IsDoing) {
                return 'state-doing';
            }
            return 'state-invalid';
        };
        const init = () => {
            if (props.flowInfo.isrequireanalyse === '否') {
                list.value = [
                    { name: '需求受理', IsFinished: true },
                    { name: '创建产品需求', IsFinished: props.flowInfo.countprouduct && props.flowInfo.countversion, IsDone: props.flowInfo.countprouduct && !props.flowInfo.countversion, IsDoing: !props.flowInfo.countprouduct },
                    { name: '规划版本', IsDone: props.flowInfo.countversion, IsDoing: props.flowInfo.countprouduct && !props.flowInfo.countversion }
                ];
            } else {
                list.value = [
                    { name: '需求初审', IsFinished: true },
                    { name: '需求受理', IsFinished: true },
                    { name: '创建产品需求', IsFinished: props.flowInfo.countprouduct && props.flowInfo.countversion, IsDone: props.flowInfo.countprouduct && !props.flowInfo.countversion, IsDoing: !props.flowInfo.countprouduct },
                    { name: '规划版本', IsDone: props.flowInfo.countversion, IsDoing: props.flowInfo.countprouduct && !props.flowInfo.countversion }
                ];
            }
        };
        init();
        return {
            list,
            getClass
        };
    }
});
</script>
<style scoped lang="less">
.busi-state-main {
    padding: 0 15px 0 0;
}
.busi-state {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1;
    a {
        flex-shrink: 0;
    }
}
.busi-state-item {
    padding: 10px 15px;
    margin: 5px 0;
    height: 28px;
    min-width: 140px;
    position: relative;
    margin-right: 5px;
    border-top: 2px solid #ebebeb;
    border-bottom: 2px solid #ebebeb;
    color: #ddd;
    display: flex;
    align-items: center;
    .state-circle {
        width: 28px;
        height: 28px;
        border-radius: 14px;
        background-color: white;
        transform: rotate(45deg);
        position: absolute;
        z-index: -1;
    }
    .state-arrow {
        width: 28px;
        height: 28px;
        transform: scale(0.707) rotate(45deg);
        border-top: 2px solid #ebebeb;
        border-right: 2px solid #ebebeb;
        background-color: white;
        position: absolute;
    }
}

.state-undo {
    border-top: 2px solid #ebebeb;
    border-bottom: 2px solid #ebebeb;
    background-color: white;
    color: #666;
    .state-circle {
        border-color: #ebebeb;
        background-color: white;
    }
    .state-arrow {
        border-color: #ebebeb;
        background-color: white;
    }
}

.state-doing {
    border-top: 2px solid @warning-color;
    border-bottom: 2px solid @warning-color;
    background-color: @warning-color;
    color: #fff;
    .circle-left {
        border-color: @warning-color;
        background-color: @warning-color;
    }
    .circle-right {
        border-color: @warning-color;
        background-color: @warning-color;
    }
    .arrow-left {
        border-color: @warning-color;
        background-color: white;
    }
    .arrow-right {
        border-color: @warning-color;
        background-color: @warning-color;
    }
}

.state-done {
    border-top: 2px solid @primary-color;
    border-bottom: 2px solid @primary-color;
    background-color: @primary-color;
    color: white;
    .circle-left {
        border-color: @primary-color;
        background-color: @primary-color;
    }
    .circle-right {
        border-color: @primary-color;
        background-color: @primary-color;
    }
    .arrow-left {
        border-color: @primary-color;
        background-color: white;
    }
    .arrow-right {
        border-color: @primary-color;
        background-color: @primary-color;
    }
}

.state-suc {
    border-top: 2px solid #eaf5fe;
    border-bottom: 2px solid #eaf5fe;
    background-color: #eaf5fe;
    color: @primary-color;
    .circle-left {
        border-color: #eaf5fe;
        background-color: #eaf5fe;
    }
    .circle-right {
        border-color: #eaf5fe;
        background-color: #eaf5fe;
    }
    .arrow-left {
        border-color: #eaf5fe;
        background-color: white;
    }
    .arrow-right {
        border-color: #eaf5fe;
        background-color: #eaf5fe;
    }
}

.state-invalid {
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    background-color: #ddd;
    color: #fff;
    .state-circle {
        border-color: #ddd;
        background-color: #ddd;
    }
    .state-arrow {
        border-color: #ddd;
        background-color: #ddd;
    }

    .circle-left {
        border-color: #ddd;
        background-color: #ddd;
    }
    .circle-right {
        border-color: #ddd;
        background-color: #ddd;
    }
    .arrow-left {
        border-color: #ddd;
        background-color: white;
    }
    .arrow-right {
        border-color: #ddd;
        background-color: #ddd;
    }
}
// 箭头
.arrow-right {
    z-index: 1;
    top: -2px;
    right: -13px;
}
.arrow-left {
    top: -2px;
    left: -14px;
}
// 圆弧
.circle-right {
    border-top: 2px solid #ebebeb;
    border-right: 2px solid #ebebeb;
    z-index: 1;
    top: -2px;
    right: -15.5px;
}
.circle-left {
    border-left: 2px solid #ebebeb;
    border-bottom: 2px solid #ebebeb;
    top: -2px;
    left: -17px;
}

/** 状态操作布局 */
.state-handel-cont {
    font-size: 13px;
    color: #333;
    .state-handel-item {
        padding: 10px 0;
        cursor: pointer;
        .state-handel-item-img {
            width: 16px;
            height: 16px;
            border-radius: 8px;
            margin-right: 8px;
            flex-shrink: 0;
            display: block;
        }
        .state-handel-item-name {
            flex: 1;
        }
        .state-handel-item-value {
            flex-shrink: 0;
        }
    }
    .state-handel-item:hover {
        background-color: #f7f8fa;
    }
}
</style>